<template>
  <div class="fileHeaper">
    <label :for="id" :class="[loadingVisbase=='show'?'hide':'show']">
      <svg t="1631864644592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2443" width="200" height="200"><path d="M959.5 587.2c0 86.4-66.5 154.7-150.7 160.8l-592.3 0.1c-85.1 0-153-67.2-153-153 0-84.4 66.9-153 150.1-155.1-0.9-3.5-3.2-13.5-3.4-26.7v-1-0.6c0-3.2 0.2-6.6 0.5-10.1 0-0.3 0.1-0.6 0.1-0.8 0.3-2.7 0.7-5.4 1.2-8.2 0.4-2.3 1-4.6 1.6-6.9 0.1-0.2 0.1-0.4 0.2-0.7 12-45.1 52.6-78.3 101.1-78.3 26 0 49.8 9.6 68.1 25.5C403 232.8 490.1 158 594.6 158c119.2 0 215.8 97.4 215.8 217.5 0 16.7-2 32.9-5.6 48.5 86.1 4 154.7 75.4 154.7 163.2z m-448-235.8L371 522.7h75.9v191.2h137V522.7H652L511.5 351.4zM765.4 865.7h-495c-17.7 0-32-14.3-32-32s14.3-32 32-32h494.9c17.7 0 32 14.3 32 32 0.1 17.7-14.3 32-31.9 32z" p-id="2444" fill="#707070"></path></svg>
    </label>
    <div :class="[loding,loadingVisbase]"></div>
    <input :id="id" type="file" @change="headChange()" accept="audio/*">
  </div>
</template>

<script>
import { cloud_md5, cloudbaseUpload, development } from '@/cloudbaseapi/cloudbase-api'
export default {
  data() {
    return {
      loadingVisbase: 'hide',
      loding: 'loding',
      uploadPath: ''
    }
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['id'],
  mounted() {
    const { UPLOADPATH } = development()
    this.uploadPath = UPLOADPATH
  },
  methods: {
    headChange() {
      const locafile = document.getElementById(this.id).files[0]
      this.uploadFile(locafile)
    },
    uploadFile(localFile) {
      const splitName = localFile.name.split('.')
      const ext = splitName[splitName.length - 1]
      const cloudFile = this.uploadPath + cloud_md5(Date.now()) + '.' + ext
      this.loadingVisbase = 'show'
      cloudbaseUpload(cloudFile, localFile).then(res => {
        const download_url = res.download_url
        this.$nextTick(() => {
          this.loadingVisbase = 'hide'
        })
        this.$emit('fileheaperchange', download_url)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .fileHeaper {
    position:relative;
    width:130px;
    height: 50px;
    label{
      display: block;
      width:100%;
      height: 100%;
      .icon{
        width:100%;height: 100%;
      }
    }
    input{
      display: none;
    }
    .show{
      display: block;
    }
    .hide{
      display: none;
    }
    .loding{
      width:130px;
      height: 130px;
      position:absolute;
      top:-36px;
      left:0px;
      background-color:transparent;
      background-image:url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22icon%22%20style%3D%22width%3A%201em%3Bheight%3A%201em%3Bvertical-align%3A%20middle%3Bfill%3A%20currentColor%3Boverflow%3A%20hidden%3B%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200h1024v1024H0z%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220%22%20%2F%3E%3Cpath%20d%3D%22M546.432%20266.24a133.312%20133.312%200%200%201-133.12-133.12C413.312%2059.84%20472.96%200%20546.432%200c73.472%200%20133.12%2059.712%20133.12%20133.12%200%2073.472-59.648%20133.12-133.12%20133.12zM263.04%20372.096c-67.072%200-121.6-54.528-121.6-121.6%200-67.136%2054.528-121.664%20121.6-121.664%2067.136%200.064%20121.536%2054.464%20121.6%20121.6%200%2067.072-54.592%20121.664-121.6%20121.664z%20m-120.512%20275.2a107.328%20107.328%200%200%201%200-214.592%20107.328%20107.328%200%200%201%200%20214.528z%20m120.512%20272.576c-50.24-0.064-90.88-40.768-90.944-91.008a91.072%2091.072%200%200%201%2090.88-90.88c50.24%200%2090.88%2040.704%2090.944%2090.88%200%2050.176-40.768%2091.008-90.88%2091.008zM546.432%201024a79.488%2079.488%200%200%201%200-158.912%2079.488%2079.488%200%200%201%200%20158.912z%20m287.744-134.272a64.192%2064.192%200%200%201%200-128.256%2064.192%2064.192%200%200%201%200%20128.256z%20m117.888-296.704a52.672%2052.672%200%200%201%200-105.216%2052.672%2052.672%200%200%201%200%20105.216z%20m-158.72-338.688a40.832%2040.832%200%201%200%2081.728%200%2040.832%2040.832%200%200%200-81.664%200z%22%20fill%3D%22%23B4B4B4%22%20%2F%3E%3C%2Fsvg%3E");
      background-position: center center;
      background-size:50px;
      background-repeat: no-repeat;
      animation: loading 1000ms linear infinite;
      z-index: 10;
      transform-origin: center center;
    }
    @keyframes loading {
      0%{
        transform:rotate(0deg);
      }
      100%{
        transform:rotate(360deg);
      }
    }
  }
</style>
